<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户主页</title>
    <link href="/static/css/layui.css" rel="stylesheet">
</head>

<body class="layui-padding-3">

    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">完善我的资料</div>
                    <div class="layui-card-body" pad15="">

                        <div class="layui-form" lay-filter="info">

                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="username" value="" readonly="" class="layui-input">
                                </div>
                                <div class="layui-form-mid layui-word-aux">账号名称用于登录不可修改</div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="name" value="" lay-verify="name" autocomplete="off"
                                        placeholder="请输入姓名" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="age" value="" lay-verify="age" autocomplete="off"
                                        placeholder="请输入年龄" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="男" title="男" checked="">
                                    <div class="layui-unselect layui-form-radio layui-form-radioed"><i
                                            class="layui-anim layui-icon layui-icon-circle layui-anim-scaleSpring layui-icon-radio"></i>
                                        <div>男</div>
                                    </div>
                                    <input type="radio" name="sex" value="女" title="女">
                                    <div class="layui-unselect layui-form-radio"><i
                                            class="layui-anim layui-icon layui-icon-circle"></i>
                                        <div>女</div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">手机</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="cellphone" value="" lay-verify="phone" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="email" value="" lay-verify="email" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea name="remarks" placeholder="请输入内容" class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit="" lay-filter="setmyinfo">确认修改</button>
                                    <button type="reset" class="layui-btn layui-btn-primary"
                                        onclick="logout()">退出登录</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="user-info"></div>
    <script src="/static/layui.js"></script>
    <script>
        // 获取localStorage中的token
        const token = localStorage.getItem('token');
        var uid;
        var $
        var form
        var layer
        layui.use(function () {
            form = layui.form;
            layer = layui.layer;
            $ = layui.jquery;


            // 提交事件
            form.on('submit(setmyinfo)', function (data) {
                var field = data.field; // 获取表单字段值
                field.id = uid
                console.log(field)
                setinfo(field)
                return false; // 阻止默认 form 跳转
            });
            getinfo()
        });
        const userInfoDiv = document.getElementById('user-info');
        getinfo = async function () {
            // 请求info接口
            const response = await fetch('/api/info', {
                headers: {
                    Authorization: `Bearer ${token}`
                },
                method: 'GET',
            });

            const data = await response.json();
            console.log(data);
            if (!response.ok) {
                layer.msg(data.message, { icon: 2, time: 1000 }, function () {
                    window.location.href = '/'
                });
                return;
            }
            form.val("info", data)
            uid = data.id
        }
        setinfo = async function (field) {
            const response = await fetch('/api/setinfo', {
                headers: {
                    Authorization: `Bearer ${token}`,
                    "Content-Type": 'application/json'
                },
                method: 'PUT',
                body: JSON.stringify(field),
            });
            const data = await response.json();
            if (!response.ok) {
                layer.msg(data.message, { icon: 2, time: 3000 });
                return;
            }
            layer.msg(data.message, { icon: 1, time: 1000 }, function () {
                window.location.href = '/home'
            });
            return data
        }
        logout = async function () {
            const response = await fetch('/api/loguot', {
                headers: {
                    Authorization: `Bearer ${token}`,
                },
                method: 'GET'
            });
            layer.msg("退出成功", { icon: 1, time: 1000 }, function () {
                localStorage.setItem('token', '');
                window.location.href = '/'
            });
        }
    </script>
</body>

</html>